<template>
  <div class="app-container">
    <el-row  :gutter="20" class="btns-warp">
      <el-col :span="4" v-for="(item, i) in menuList" :key="i">
        <div @click="goDetail(item)" class="btn-warp">
          <img src="@/assets/images/big-button-bg.png">
          <div class="btn-icon" :class="listClass(i+1)">{{item.ename}}</div>
          <div class="btn-title">{{item.cname}}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import service from "@/api/material";
export default {
  name: "Test",
  data() {
    return {
      menuList: [
        {
          cname: "疲劳寿命预测",
          ename: 'FL',
          resourceid: 'Fasdfadfawer524325fa12sd1f325ew41L',
        }
      ],
    };
  },
  created() {
    // this.$store.dispatch('settings/changeSetting', {
    //   key: 'theme',
    //   value: '#409EFF'
    // })
    this.pageInit();
  },
  methods: {
    listClass(index){
      switch (index % 6) {
        case 0: return 'btn-icon-bg6';
        case 2: return 'btn-icon-bg2';
        case 3: return 'btn-icon-bg3';
        case 4: return 'btn-icon-bg4';
        case 5: return 'btn-icon-bg5';
      }
    },
    goDetail(res){
      this.$router.push({ path: res.description ,query:{id:res.id}})
      // console.log(res)
      // if(res.ename == 'UD'){
      //   this.$router.push({ path: '/material/customdetail' ,query:{id:res.id}})
      // }
      // if(res.ename == 'FKM'){
      //   this.$router.push({ path: '/material/fkmdetail' ,query:{id:res.id}})
      // }
      // if(res.ename == 'DNV'){
      //   this.$router.push({ path: '/material/dnvdetail' ,query:{id:res.id}})
      // }
      // if(res.ename == 'BS'){
      //   this.$router.push({ path: '/material/bsdetail' ,query:{id:res.id}})
      // }
      // if(res.ename == 'DH'){
      //   this.$router.push({ path: '/material/dianh28' ,query:{id:res.id}})
      // }
      // if(res.ename == 'DL'){
      //   this.$router.push({ path: '/material/dlrx37' ,query:{id:res.id}})
      // }
      // if(res.ename == 'DV8'){
      //   this.$router.push({ path: '/material/dvs1608' ,query:{id:res.id}})
      // }
      // if(res.ename == 'DV7'){
      //   this.$router.push({ path: '/material/dvs161227' ,query:{id:res.id}})
      // }
      // if(res.ename == 'EU3'){
      //   this.$router.push({ path: '/material/eurocode3' ,query:{id:res.id}})
      // }
      // if(res.ename == 'EU9'){
      //   this.$router.push({ path: '/material/eurocode9' ,query:{id:res.id}})
      // }
      // if(res.ename == 'IIW9'){
      //   this.$router.push({ path: '/material/iiw200829' ,query:{id:res.id}})
      // }
      // if(res.ename == 'IIW0'){
      //   this.$router.push({ path: '/material/iiw200830' ,query:{id:res.id}})
      // }
      // if(res.ename == 'IIW1'){
      //   this.$router.push({ path: '/material/iiw200831' ,query:{id:res.id}})
      // }
      // if(res.ename == 'IIW2'){
      //   this.$router.push({ path: '/material/iiw200832' ,query:{id:res.id}})
      // }
      // if(res.ename == 'JHF'){
      //   this.$router.push({ path: '/material/jhf' ,query:{id:res.id}})
      // }
      // if(res.ename == 'LW'){
      //   this.$router.push({ path: '/material/lwkzsl36' ,query:{id:res.id}})
      // }
      // if(res.ename == 'PL'){
      //   this.$router.push({ path: '/material/plqd35' ,query:{id:res.id}})
      // }
      // if(res.ename == 'PR'){
      //   this.$router.push({ path: '/material/pren' ,query:{id:res.id}})
      // }

    },
    pageInit(){
      service.pageInit().then((res) => {
        this.menuList = res.data;
      }).catch((e) => {
      }).finally(() => {
      });
    }
  }
};
</script>

<style scoped lang="scss">
  .app-container{
    padding: 5px;
  }
  .btns-warp{
    padding-left: 20px;
    padding-right: 20px;
    min-width: 1000px;
  }
  .btn-warp{
    margin-top: 15px;
    position: relative;
    cursor: pointer;
    img{
      width: 100%;
      box-shadow: 6px 6px 6px #EEF6FE;
    }
    .btn-icon{
      position: absolute;
      top: 22px;
      left: 30%;
      width: 40%;
      height: 52%;
      z-index: 1;
      color: #fff;
      font-size: 40px;
      font-family: ArialRoundedMTBold;
      display: flex;
      align-items: center;
      justify-content: center;
      &:before{
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 20%;
        background-color: #7dd6e3;
      }
    }
    .btn-icon-bg2:before{
      background-color: #66c5f3;
    }
    .btn-icon-bg3:before{
      background-color: #89abf5;
    }
    .btn-icon-bg4:before{
      background-color: #89b7f5;
    }
    .btn-icon-bg5:before{
      background-color: #89c9f5;
    }
    .btn-icon-bg6:before{
      background-color: #7ed2e7;
    }
    .btn-title{
      position: absolute;
      top:  75%;
      width: calc(100%);
      
      text-align: center;
      z-index: 1;
      font-size: 14px;
      color: #333;
    }
  }
</style>
